<template>
  <div class="delayContainer" style="display: flex; flex-direction: column;">
    <div class="box3">
      <h2>Delay处理</h2>
    </div>

    <!--搜索产品-->
    <div class="box4">
      <el-form :inline="true" :model="searchProgress" class="demo-form-inline">
        <el-form-item label="负责人" style=" margin-top: 5px">
          <el-select v-model="searchProgress.charger" placeholder="负责人/测试项目经理">
            <el-option label="测试项目经理一" value="测试项目经理一"></el-option>
            <el-option label="测试项目经理二" value="测试项目经理二"></el-option>
            <el-option label="测试项目经理三" value="测试项目经理三"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品" style="margin-left: 20px;  margin-top: 5px">
          <el-select v-model="searchProgress.proName" placeholder="产品名称">
            <el-option label="交换机" value="交换机"></el-option>
            <el-option label="华为路由器" value="华为路由器"></el-option>
            <el-option label="处理器" value="处理器"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px;  margin-top: 5px">
          <el-button type="primary" @click="selectByChargerProName">筛选</el-button>
          <el-button type="primary" @click="drawbackSelect">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--delay产品信息展示-->
    <!--按照delay时间长短排序-->
    <div class="box5">
      <el-table class="table_pro" :data="delayInfo" border stripe height="450">
        <el-table-column
            type="selection"
            width="55"
            align="center">
        </el-table-column>
        <el-table-column prop="id" label="产品ID"></el-table-column>
        <el-table-column prop="proName" label="产品名称"></el-table-column>
        <el-table-column prop="authName" label="delay认证名称"></el-table-column>
        <el-table-column prop="authAllNum" label="认证数量"></el-table-column>
        <el-table-column prop="authComplete" label="已完成认证数量"></el-table-column>
        <el-table-column prop="noComplete" label="未完成认证数量"></el-table-column>
        <el-table-column prop="startDate" label="开始日期"></el-table-column>
        <el-table-column prop="deadline" label="截止日期"></el-table-column>
        <el-table-column prop="charger" label="负责人"></el-table-column>
        <el-table-column prop="delayDay" label="Delay天数" :cell-style="{ color: 'red' }"></el-table-column>
        <el-table-column prop="authProgress" label="认证进度" :formatter="percentageFormatter"></el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="overDelayOne(scope.row)">完成</el-button>
            <el-button type="text" size="small" @click="pushDelayOne">催促</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Delay",

  data() {
    return {
      delayInfo: [], //delay的产品认证信息——以产品名称和负责人唯一标识

      searchProgress: { //搜索条件
        charger: '',
        proName: '',
      }

    }
  },

  methods: {
    //通过负责人和产品名称筛选
    selectByChargerProName() {

    },

    //取消筛选
    drawbackSelect(){
      //清空数据
      //发送请求更新表格数据
    },

    percentageFormatter(row, column, cellValue){
      return (cellValue * 100).toFixed(2) + '%'; // 保留两位小数
    },

    //点击完成
    overDelayOne(row){
      this.delDelayProductOne = JSON.parse(JSON.stringify(row))

      //发送HTTP请求
      //根据负责人、产品名称及认证名称在delay表中删除该条数据（不是真的删除），将其delay天数改为0，
      //更新表格
      //测试
      this.$message.success("delay处理完成！")
      //删除delay表中的已完成delay处理的数据
      this.$request({
        url: '/progress/deleteDelayOne',
        method: 'POST',
        data: this.delDelayProductOne,
      }).then(res => {
        this.delayInfo = res.data
      })

    },

    pushDelayOne(){
      this.$message.success("催促已发出！")
    }
  },

  mounted() {
    request.get('/product/progress').then(res => {
      this.delayInfo = res.data
    })
  }

}
</script>

<style scoped>

.box3 {
  height: 70%;
  background-color: #cccccc; /* 仅用于视觉效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 5px;
}

.box4 {
  text-align: center;
  padding-top: 10px;
}


</style>